<template>
  <transition name="translate">
    <div class="wrapper">
      <common-back :content="title"></common-back>
      <van-loading class="v-loading"
                   size="30px"
                   color="white"
                   v-show="!list.length" />
      <ul class="about-list">
        <li class="about-item"
            v-for="item of list"
            :key="item.id"
            @click="handleDetail(item)">
          <div class="desc">{{item.user_type}}</div>
          <i class="iconfont">&#xe6bf;</i>
        </li>
      </ul>
      <keep-alive>
        <router-view v-if="$route.meta.keepAlive"></router-view>
      </keep-alive>
      <router-view v-if="!$route.meta.keepAlive"></router-view>
    </div>
  </transition>
</template>
<script>
import CommonBack from 'common/headerBack/back'
export default {
  name: '',
  components: {
    CommonBack
  },
  created () {
    this.getList()
  },
  methods: {
    getList () {
      this.$api.partner.list()
        .then(this.getListSucc)
        .catch((e) => {
          this.$errorTip()
        })
    },
    getListSucc (res) {
      res = res.data
      if (res.code === this.$api.CODE_OK && res.data) {
        const data = res.data
        this.list = data.lists
      }
    },
    handleDetail (item) {
      this.$router.push({
        path: `/me/partner/partnerDetail/${item.id}`,
        query: {
          title: item.user_type
        }
      })
    }
  },
  data () {
    return {
      title: '合伙人',
      list: []
    }
  }
}
</script>
<style lang="stylus" scoped>
@import '~stylus/variable.styl'
@import '~stylus/mixins.styl'

.wrapper
  initPosition()
  background-color $space
  padding-top 108px
  box-sizing border-box
  z-index 10

  .about-list
    width 100%
    padding()

    .about-item
      margin-bottom 20px
      width 100%
      height 141px
      background $common_bgc
      border-radius 20px
      display flex
      justify-content space-between
      align-items center
      padding()

      &:active
        background-color $recommend_title

      .desc
        text-indent 20px
        font-size $shop_name
        font-weight 400
        color $order_content

      i
        font-size 32px
        color $sub_icon

.v-loading
  position fixed
  top 50%
  left 50%
  transform translate(-50%, -50%)
  z-index 100
  padding-left 10px
  padding-right 10px
  padding-top 10px
  padding-bottom 10px
  border-radius 3px
  background-color rgba(0, 0, 0, 0.5)

.translate-enter-active, .translate-leave-active
  transition all 0.3s

.translate-enter, .translate-leave-active
  transform translate3d(100%, 0, 0)
</style>
